Visual Languages: A Matter of Style

This articles submits the thesis that visual data modeling and programming languages are conveniently conceived as rendering, or ‘styling’, of conventional, textual languages. Styling has become a widespread technique with the advent of the Web and of the markup language XML. With XML, application data can be modeled after the application logic regardless of the intended rendering. Rendering of XML documents is specified using style sheet languages like CSS. Provided the styling language offers the necessary capabilities, style sheets can similarly specify a visual rendering of modeling and programming languages. The approach described in this article considers visual languages that can be defined as a 1-to-1 visualization of (an abstract syntax of) a textual language. Though the approach is obviously limited by the employed style sheet language, its advantages are manifold: (a) visualization is achieved in a systematic manner from a textual counterpart which allows the same paradigms to be used in several languages and ensures a close conceptual relation between textual and visual rendering of a language; (b) visual languages are much easier to develop than in ad-hoc manners; (c) the capability for adaptive styling (based on user preference such as disabilities or usage context such as mobile devices) is inherited from Web style sheet languages such as CSS. To make CSS amenable for visual rendering of a large range of data modeling and programming languages, this article first introduces limited, yet powerful extensions to CSS. Then, it demonstrates the approach on a use case, the logicbased Web query and transformation language Xcerpt. Finally, it is argued that the approach is particularly well-suited to logic-based languages in general.